<template>
    <div class="topic">
        <!-- 
            v-model 是否处于加载状态 加载过程中不触发load事件
            finished  是否已加载完成，加载完成后不再触发load事件

            load  滚动条与底部距离小于 offset 时触发  用于请求下一页的数据
         -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div v-for="item in list" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <h2>{{ item.title }}</h2>
            </div>
        </van-list>
    </div>
</template>

<script>
import {
    listaction
} from "@/api/topic"
export default {
    data() { 
        return {
            list:[], // 
            loading:false,
            finished:false,
            start:1
        };
    },
    computed: {

    },
    created() {
        
    },
    mounted() {

    },
    methods: {
        onLoad(){ // 进入页面的时候会执行
            listaction({
                page:this.start
            })
            .then(res =>{
                console.log(res)
                // 当请求第二页数据之后 页面中的数据应是第一页+第二页的数据
                // this.list = res.data; //[] ...[1,2,3]
                this.list.push(...res.data)
                // 当数据请求完毕  需要手动的把loading 变更成false 
                this.loading = false;
                // 数据获取完毕之后  变更页数 方便下一次onload方法调用
                this.start ++;
                // 当请求到最后一页数据 需要变更finished为true
                if(res.page == res.total){ // res.page 当前页数 res.total 总页数
                    this.finished = true
                }
                
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.topic{
    padding-bottom: 100px;
    img{
        width: 100%;
    }
}
</style>
